<template>
    <div class="contentS alarm">
        <!-- 头部 -->
        <div class="topL clear_float" >
            <div class="top_right ">
                <div class="top_right_top clear_float">
                    <span class="font14">{{timepiece}}</span>
                    <!-- <span class=" yaoyao yaoyao1 fa fa-bars"></span> -->
                </div>
                <div class="top_right_bottom clear_float" style="display: none;">
                    <div>站点类型</div>
                    <div class="zdLeixin">
                        <div class="check_box_C" :class="type.qixiang ? 'active_leixin' : '' " @click="selectType('qixiang')">
                            <span class="check_box"></span>
                            <span>气象</span>
                        </div>
                        <div class="check_box_C" :class="type.shuili ? 'active_leixin' : '' " @click="selectType('shuili')">
                            <span class="check_box"></span>
                            <span>水利</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="top_left " >
                <div class="top_left_top clear_float" @click="del">
                    <!-- <span class="yaoyao fa fa-angle-right"></span> -->
                    <span class=" yaoyao fa fa-qrcode"></span>
                    <span>{{typeName}}</span>
                </div>

            </div>
            
        </div>
        <!-- 标题 -->
        <div class="topTitle">
            <span>正常</span>
            绍兴市防灾减灾大数据共享平台
        </div>
        <!-- svg顶部 -->
        <div class="svgContainerTop">
            <svgMenu :warnNum="warnObj" @refreshSvg="refreshSvg" ref="componentreSvgMenu" :blocksAll="blocksAll"></svgMenu>
        </div>
    
        <!-- svg部分 -->
        <div :class="svgShow=='当前天气'||svgShow=='预警'?'svgTrue':''" id="svgContainer" class="svgContainer">
            <simple-svg
            :filepath="svgUrl"
            :width="svgWidth"
            :height="svgHeight"
            :id="'custom-id'"
            @ready="reLoadQt()"
            />
            <div id="YMbox">

            </div>
        </div>
        <div id="mapcontainer" :class="svgShow!='当前天气'&&svgShow!='预警'?'svgTrue':''">
            <img :src="mapImg" alt="">
        </div>
        <div class="top_left_bottom clear_float" >
            <div class="fa fa-volume-up"></div>
            <div style="width:92%; padding-left: 8px;">
                <marquee onMouseOut="this.start()" onMouseOver="this.stop()">{{warnMEssage}}</marquee>
            </div>
        </div>
        
       <!--  <div class="svg-level">
            <ul>
                <li>应到 <span>100</span>站</li>
                <li>实到 <span>100</span>站</li>

            </ul>

        </div> -->

        <div id="backQt" v-show="Qt" @click="changeSvg('shaoxing')">
            上一级
        </div>
        <!-- 所有信息 -->
        <div id="drag" class="drag-container clear_float">
            <Wdrag @refreshWarn="refreshWarn" v-for="(item , index) of blocks" ref="componentref" :key="index" @closep="closeThis" :img="jibenImg" :msg="item">111111111</Wdrag>

        </div>
        <menuManage @refreshBlocksAll="refreshBlocksAll" ref="componentreMenu" :blocksAll="blocksAll"> </menuManage>
        <div id="tipsJ">
            <div>{{mouseWarn.yjcontent}}</div>
            <!-- <div>{{mouseWarn}}</div> -->
        </div>
        <!-- <div @click="del">
          点击我！
        </div> -->
        <common id="nulll" ref='common'></common>
    </div>

</template>

<script>
    import '../assets/d3.js';
    import Vue from 'vue'
    import SockJS from  'sockjs-client';
    import '../assets/stomp.js';
    import '../assets/jquery-ui.js';
    import Wdrag from '../components/indexComponent';
    import Weather12 from '../components/indexComponents/Weather12';
    import jiben from '../components/indexComponents/jiben';
    import live from '../components/indexComponents/live';
    import maxWind from '../components/indexComponents/maxWind';
    import waterLine from '../components/indexComponents/waterLine';
    import svgMenu from '../components/indexComponents/svgMenu';
    import menuManage from '../components/menuManage';
// import func from './vue-temp/vue-editor-bridge.js';
    // import * as d3 from 'd3'  //d3.js
    import {SimpleSVG} from 'vue-simple-svg'
    Vue.component('simple-svg', SimpleSVG);
    import common from '../components/common'
    // import QXMap from 'QXMap';
    // var map;
    export default {
    name: 'Alarm',
    props: {

    },
    components: {
        Wdrag,Weather12,waterLine,maxWind,live,jiben,menuManage,svgMenu,common
    },
    data() {

        return {
            mapImg:"",
            map:"",
            svgShow:"当前天气",
            warnNum:0,
            typeName:"降雨模式",
            jibenImg:"绍兴",
            timepiece:"",
            manageMenu:false,
            xiangyingdengjiS:true,
            fangxunbanS:false,
            fangxunban:false,
            qixiang2S:false,
            qixiang2:false,
            dizhizaihaiS:false,
            dizhizaihai:false,
            warnMEssage:"暂无通知。",
            warnXiang:{
                where:[],
                type:[],
            },
            warnDj:false,
            svgUrl:"../../static/svg/shaoxing.svg",
            svgWidth:"400px",
            svgHeight:"400px",
            ajaxType:{
                type:"1",
                code:"330600000000"
            },
            blocks: ["综合概况","雨量排行","预警","水位信息",],

            blocksAll: [{name:"基本信息",type:false,parent:"jiben"},{name:"近12小时逐小时最大雨量",type:false,parent:"water"},
                        {name:"极大风信息",type:false,parent:"wind"},{name:"实况告警信息",type:false,parent:"jiben"},
                        {name:"水位信息",type:true,parent:"water"},{name:"降水信息",type:true,parent:"water"},
                        {name:"雷达定量降水",type:false,parent:"temp"},{name:"雨量排行",type:false,parent:"water"},
                        {name:"实况降水图",type:false,parent:"water"},{name:"水位24小时趋势图",type:false,parent:"water"},
                        {name:"预警",type:true,parent:"jiben"},{name:"综合概况",type:true,parent:"jiben"}
                        ],
            type:{qixiang:true,shuili:false,guotu:false,huanbao:false,},
            moni:{
                "柯桥区":[120.302,29.95],"越城区":[120.450,30.0],"上虞区":[120.680,30.015],
                "诸暨市":[120.185,29.720],"嵊州市":[120.630,29.635],"新昌县":[120.930,29.530],
            },
            iconImg:{
                "暴雪":"../../static/images/svgicon/暴雪@2x.png","暴雨":"../../static/images/svgicon/暴雨@2x.png",
                "冰雹":"../../static/images/svgicon/冰雹@2x.png","低温":"../../static/images/svgicon/低温@2x.png",
                "风":"../../static/images/svgicon/风@2x.png","干旱":"../../static/images/svgicon/干旱@2x.png",
                "寒潮":"../../static/images/svgicon/寒潮@2x.png","洪涝":"../../static/images/svgicon/洪涝@2x.png",
                "雷电":"../../static/images/svgicon/雷电@2x.png","路面结冰":"../../static/images/svgicon/路面结冰@2x.png",
                "霜冻":"../../static/images/svgicon/霜冻@2x.png","台风":"../../static/images/svgicon/台风@2x.png",
                "雾霾":"../../static/images/svgicon/雾霾@2x.png","有雾":"../../static/images/svgicon/有雾@2x.png",
            },
            cun:{
                 "柯桥区":{"柯桥区":[120.302,29.95]},"越城区":{"越城区":[120.450,30.0]},"上虞区":{"上虞区":[120.680,30.015]},
                 "诸暨市":{"诸暨市":[120.185,29.720]},"嵊州市":{"嵊州市":[120.630,29.635]},"新昌县":{"新昌县":[120.930,29.530]},

            },
            Qt:false,
            warnObj:{
                "当前天气":"",
                "预警":"",
                "近1小时全市面雨量":"",
                "近1小时全市极大风":"",
                "近24小时全市面雨量":"",
                "未来1小时全市面雨量":"",
                "未来1小时全市极大风":"",
                "未来24小时全市面雨量":"",
            },
            warnObjdata:false,
            mouseWarn:"",
        };
    },
    computed: {

    },
    methods: {
        refreshSvg(item){
            this.svgShow=item;
            console.log(item);
            if(item=="近1小时全市面雨量"){
                // for(var i=0;i<this.$refs.componentref.length;i++){
                //     if(this.$refs.componentref[i].name="雨量排行"){
                //         console.log(this.$refs.componentref[i])
                //         this.$refs.componentref[i].refreshWater(this.$refs.componentref[i].name)
                //     }
                // }
                var time=this.$refs.common.getthisTime().slice(0,10)+"0000";
                if(time.slice(10,12)<10){
                    time=this.$refs.common.getTimeCShow(time,-60);
                };
                var timeZ=this.$refs.common.timechangeShowHour(time);
                this.mapImg="http://10.135.118.81/ExportDataV1/GetLatestSurfHor.ashx?ID=330600000&title="+timeZ
                            +"近一小时降水&hours=0&prodcode=R1&rainBow=rain1h.clv&time="+time;
            }else if(item=="近1小时全市极大风"){
                
            }else if(item=="近24小时全市面雨量"){
                var time=this.$refs.common.getthisTime().slice(0,10)+"0000";
                if(time.slice(10,12)<10){
                    time=this.$refs.common.getTimeCShow(time,-60);
                };
                var timeZ=this.$refs.common.timechangeShowHour(time);
                this.mapImg="http://10.135.118.81/ExportDataV1/GetLatestSurfHor.ashx?ID=330600000&title="+timeZ
                            +"近24小时降水&hours=0&prodcode=R24&time="+time;
            }else if(item=="未来1小时全市面雨量"){
                this.mapImg="http://10.135.118.81/ExportDataV1/GetLatestRadarQPF.ashx?ID=330600000&title=%E9%9B%B7%E8%BE%BE%E5%AE%9A%E9%87%8F%E9%99%8D%E6%B0%B4%E9%A2%84%E6%8A%A5&hours=60&prodcode=radarqpf360"
            }else if(item=="未来1小时全市极大风"){

            }else if(item=="未来24小时全市面雨量"){
                 this.mapImg="http://10.135.118.81/ExportDataV1/GetLatestRadarQPF.ashx?ID=330600000&title=%E9%9B%B7%E8%BE%BE%E5%AE%9A%E9%87%8F%E9%99%8D%E6%B0%B4%E9%A2%84%E6%8A%A5&hours=360&prodcode=radarqpf360"
            }
            
        },
        refreshWarn(num){
            var i;
            for(i in this.warnObj){
                if(i==num.name){
                    this.warnObj[i]=num.num;
                }
                if("预警"==num.name){
                    this.warnObjdata=num.data;
                    // num.data[0].unitname="上虞";
                    var that=this;
                    for(var p=0;p<num.data.length;p++){
                        $("#CKS"+num.data[p].unitname.slice(0,2)).html("<img src='"+num.data[p].icon.slice(6,100)+"'>");
                        $("#CKS"+num.data[p].unitname.slice(0,2)).click((e)=>{
                            var id=e.currentTarget.id.slice(3,5);
                            for(var o=0;o<that.warnObjdata.length;o++){
                                if(that.warnObjdata[o].unitname==id){
                                    this.mouseWarn=that.warnObjdata[o];
                                }
                            }
                            e.stopPropagation();
                            var left=parseInt(window.event.clientX)+10;
							var top=window.event.clientY;
                            $("#tipsJ").css({"display":"block","left":left+"px","top":top});
                            console.log(this.mouseWarn)
                            $("#tipsJ").click(function(e){
                                e.stopPropagation();
                            });
                        })
                    };
                }
            }
            console.log(this.warnObj) ;
        },
        refreshBlocksAll(arr){
            this.blocks=arr.arr;
            console.log(arr);
            this.typeName=arr.typeName;
            
            for(var i=0;i<this.$refs.componentref.length;i++){
                // this.$refs.componentref[i].showI();
                this.$refs.componentref[i].refreshAll();
            };
            this.manageMenu=!this.manageMenu;
        },
        closeThis(msg){
            for(var i=0;i<this.blocks.length;i++){
                if(this.blocks[i].name==msg){
                    this.blocks[i].status=false;
                }
            }
        },
        selectType(type){
            var i;
            for(i in this.type){
                if(type==i){
                    this.type[i]=!this.type[i];
                }
            }
        },
        del(){
            this.manageMenu=!this.manageMenu;
            this.$refs.componentreMenu.show();     
        },
        getBlocks(status) {
            return this.localBlocks.filter(block => block.status === status);
        },
        aa(){

        },
        sort(){
             $(".qop").not(".ui-sortable-helper").each(function(index){
                if(index==1||index==3){
                    $(this).css("margin-left","52.5%");
                }else{
                    $(this).css("margin-left","0.5%");
                }
            })
        },
        reLoadQt(){
            this.ajaxType.code="330600000000";
            this.jibenImg="绍兴"
            var start=[119.879,29.230];
            var end=[121.210,30.290];
            // svg的宽高
            var width= $('svg')[0].clientWidth;
            var height= $('svg')[0].clientWidth/1.294;
            // 经纬度与定位的对应关系
            console.log(width,height)

            var xbi=width/(end[0]-start[0]);
            var ybi=height/(end[1]-start[1]);
            // 原点
            var yuanx=($('#svgContainer')[0].clientWidth-$('svg')[0].clientWidth)/2;

            // var yuanx=0;
            var i;
            var str="";
            var p;
            console.log(this.warnXiang)
            for(i in this.moni){
                    var left=(this.moni[i][0]-start[0])*xbi+yuanx+"px";
                var top=(end[1]-this.moni[i][1])*ybi+"px";
                var tip="";
                if(this.warnXiang.type.length>0){
                    tip="当前预警：";
                    for(var l=0;l<this.warnXiang.type.length;l++){
                        if(l==this.warnXiang.type.length){
                            tip+=this.warnXiang.type[l]+"";
                        }else{
                            tip+=this.warnXiang.type[l]+"、";
                        };
                    };
                };
                str+="<div class='svgYan'  id='CK"+i.slice(0,2)+"' style='left:"+left+";top:"+top+"'><div class='cksss' id='CKS"+i.slice(0,2)+"'></div>"+i
                for(var n=0;n<this.warnXiang.where.length;n++){
                    console.log(this.warnXiang)
                    if(this.warnXiang.where[n]==i){
                        for(var l=0;l<this.warnXiang.type.length;l++){
                            for(p in this.iconImg){
                                if(p==this.warnXiang.type[l]){
                                    str+="<img title="+tip+" src="+ this.iconImg[p]+">"
                                }
                            }
                        };
                    }
                }
                str+="</div>"
            }
            $("#YMbox").html(str);
            // //console.log(23)
            $("path").unbind();
            $("#svgContainer").find("path").on("click",(e)=>{
                // e.stopPropagation()
                // //console.log(12121,e.target.id)
                var id = e.target.id
                // this.changeSvg(id);

            });
            $("g[id]").each((index)=>{
                var id=$("g[id]").eq(index).attr("id");
                for(var n=0;n<this.warnXiang.where.length;n++){
                    if(this.warnXiang.where[n].match(id)){
                        $("g[id]").eq(index).find("path").attr("style", "fill:red;stroke:#fff;stroke-width:1");
                        $("g[id]").eq(index).find("path").attr("qop", "fill:red;stroke:#fff;stroke-width:1");
                    }
                }
            })

            $("#svgContainer").find("path").on("mouseenter", function(d, i) {
                var color=$(this).attr("backC");
                $(this).attr("style", "fill:#58A2F5;stroke:#fff;stroke-width:1");
            }).on("mouseleave", function(d, i) {
                var color=$(this).attr("backC");
                if( $(this).attr("qop")){
                        $(this).attr("style", $(this).attr("qop"));
                }else{
                    $(this).attr("style", "fill:##D8F3F;stroke:#6bbaeb;stroke-width:1");
                }

            });
            $("#YMbox div").on("mouseenter", function(d, i) {
                var id=$(this).attr("id").slice(2,5);
                $("[id^="+id+"] path").attr("style", "fill:#58A2F5;stroke:#fff;stroke-width:1");
                // //console.log(id);
            }).on("mouseleave", function(d, i) {
                var id=$(this).attr("id").slice(2,5);
                    if( $("[id^="+id+"] path").attr("qop")){
                        $("[id^="+id+"] path").attr("style", $("[id^="+id+"] path").attr("qop"));
                }else{
                    $("[id^="+id+"] path").attr("style", "fill:##D8F3F;stroke:#6bbaeb;stroke-width:1");
                }
            });
            setTimeout(()=>{
                for(var i=0;i<this.$refs.componentref.length;i++){
                    this.$refs.componentref[i].sortLe()
                }
            },100);
        },
        getThisTime(){
			var date = new Date();
			var Day = date.getDate()>9?date.getDate():"0"+date.getDate();
			var Year = date.getFullYear();
			var Mounth = date.getMonth()>=9?date.getMonth()+1:"0"+(date.getMonth()+1);
			var hour=date.getHours()>9?date.getHours():"0"+date.getHours();
			var min=date.getMinutes()>9?date.getMinutes():"0"+date.getMinutes();
			// 星期几
			var n_day = date.getDay();
			var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六",];
            for(var i=0;i<arr.length;i++){
                if(n_day==i){
                    var zhou=arr[i];
                }
            };
			var end=Year+"年"+Mounth+"月"+Day+"日 "+hour+":"+min+":00"+" "+zhou;
			return end;
		},
        getscenic(){
            this.$ajax({method: 'get',  url: "http://172.21.129.156:8081/web/rain/stenciInfo?type=D1"}).then((res)=>{
                var _data=res.data.DS;
                // //console.log(_data)
                this.scenic=_data;
            })
            .catch(function(err){
                //console.log(err)
            });
        },
        changeSvg(type){

            $("#YMbox").html("");
            this.svgUrl = "../../static/svg/"+type+".svg"
            this.Qt = !this.Qt
            setTimeout(()=>{
                for(var i=0;i<this.$refs.componentref.length;i++){
                    this.$refs.componentref[i].refreshAll()
                };
            },1000);

        },
        // 建立长链接
        connect(){
            var socket = new SockJS('http://172.21.129.156:8081/web/endpointSang');
            var stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
                // setConnected(true);
            // //console.log('Connected:' + frame);
                stompClient.subscribe('/topic/test', function (response) {
                //  showResponse(JSON.parse(response.body).responseMessage);
                    alert(response);
                    //console.log(response);
                })
            });
        },
    },
    mounted() {
        // 跑马灯

        // 景区信息
        $(document).click(function(){
            $("#fixedd").css("display","none");
            $("#tipsJ").css("display","none");
        });
        $(document).delegate(".jingqua","click",function(e){
            e.stopPropagation();
            var data=$(this).attr("data");
                data=JSON.parse(data);
                //console.log(data)
            var str="<div>景区名称："+data.name+"</div>"
                str+="<div>联系人："+data.contact+"</div>"
                str+="<div>联系电话："+data.tel+"</div>";
            var left=parseInt(window.event.clientX)+10;
            var top=window.event.clientY;
            $("#fixedd").html(str);
            $("#fixedd").css({"display":"block","left":left+"px","top":top});
        })
        // 预警等级;
        this.getscenic();
        this.svgWidth=$('#svgContainer')[0].clientWidth+"px";
        this.svgHeight=$('#svgContainer')[0].clientWidth/1.294+"px";
        this.$ajax({method: 'get',  url: "http://172.21.129.156:8081/web/rain/warnStatusNew",}).then((res)=>{
            var _data=res.data.DS;
            // //console.log(res);
            // this.warnMEssage=_data;
            var i;
            for(i in _data){
                if(_data[i].type=="气象"){
                    this.qixiang2S=true;
                    this.qixiang2=_data[i].grade;
                }else if(_data[i].type=="水利"){
                    this.fangxunbanS=true;
                    this.fangxunban=_data[i].grade;
                }else if(_data[i].type=="国土"){
                    this.dizhizaihaiS=true;
                    this.dizhizaihai=_data[i].grade;
                }
            }
        })
        .catch(function(err){
            //console.log(err)
        })
        // 预警信息
        this.$ajax({method: 'get',  url: "http://172.21.129.156:8081/web/rain/warnreleaseToday",}).then((res)=>{
            var _data=res.data.DS;
            console.log(res)
            if(_data.msg!=""){
                console.log(_data)
                this.warnMEssage=_data.msg;
                this.warnXiang.where=_data.contry;
                this.warnXiang.type=_data.type;
                this.reLoadQt();
            };
        })
        .catch(function(err){
            console.log(err)
        })

        // //console.log(this.blocks);
        this.timepiece=this.getThisTime();
        this.connect();
        // this.reLoadQt();
        // $("#app").css("height",$(".qop").clientHeight*2)

        window.onresize = function windowResize () {
            // 通过捕获系统的onresize事件触发我们需要执行的事件
            // $("#app").css("height",$(window).height())
        }
        var flag=true;
        var that=this;

        $("#drag").sortable({
            // revert:true,
            handle: ".indexComTop",
            that:that,
            start(e,ui){
                var width=ui.item.clientWidth
                $(".ui-sortable-placeholder").css("width",width)
            },
            sort(e){
                if(flag){
                    that.sort()
                    flag=false;
                }
            },
            change(){
                that.sort()
            },
            stop(){
                flag=true;
                that.sort();
                // //console.log(this)
                //console.log(that.$refs.componentref)
                for(var i=0;i<that.$refs.componentref.length;i++){
                    that.$refs.componentref[i].sortLe()
                }
            }
        });
        // 加载地图
        // let option = {
        //     isshowname:false,
        //     weight: 4,
        //     fillOpacity: 0,
        //     fillColor: "#fff",
        //     opacity: 1,
        //     color: "red",
        //     linestyle: 'solid' //dot
        // }
        // map = QXMap.Map('mapcontainer', {
        //     zoom: 10,
        //     center: [120.5000,30.0700],
        //     maptype: QMAP_NORMAL_MAP
        // })
        // let maker=QXMap.RegionLayer("330600000", option, (regionLayer) => {
        //     map.addVectorLayer(regionLayer)
        //     map.fitBounds(regionLayer.getBound())
        //     regionLayer.addMask(1)
        //     setTimeout(function(){
        //         map.setZoom(10)
        //     },2000)
        // });
        // console.log(map)
    },
  };
</script>
<style lang="less">
    .riverPath{
        fill: #02DEE5 !important;
    }
    *{
        box-sizing: border-box;
    }
    body{
        min-width: 1366px;
        min-height: 637px;
    }
    .svgContainer{
        path{
            fill: #143771;
            stroke: #6bbaeb;
            stroke-width: 1;
        }
        .backkk{
            fill: #3A76A9;
            stroke-width: 0 !important;
        }
    }
    
    .header{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        display: none;
    }
    @media screen and (min-width: 1900px) {
        .topTitle{
            font-size: 32px;
        }
    }
    @media screen and (max-width: 1900px) {
        .topTitle{
            font-size: 28px;
        }
    }
    .indexComTop2+div{
        background: rgba(0,0,0,0.2);
        border:1px solid #2A5C77;
    }
    .topTitle{
        width: 100%;
        text-align: center;
        padding-top: 10px;
        color: #FFFFFF;
        height: 70px;
        line-height: 50px;
        text-shadow: 1px 3px 12px rgb(0, 174, 255);
        // background:url("../assets/bg-header.png");
        background-repeat:no-repeat;
        background-position:center;
        span{
            width: 24px;
            display: inline-block;
            padding: 2px 3px;
            font-size: 12px;
            background: rgb(5, 167, 54);
            border-radius: 5px;
            font-weight: bold;
            line-height: 14px;
            color: #fff;
            text-shadow: 1px 3px 12px rgba(0, 174, 255,0)
        }
    }
    #backQt{
        position: absolute;
        top: 50px;
        left: 30%;
        background: #fff;
        padding: 6px 10px;
        z-index: 5;
    }
    .alarm{
        .content{
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            // padding-top: 100px;
        }
    }
    .contentS{
        height: 100%;
        width: 100%;
        &>.drag-container{
            // min-height: 90%;
        }
    }
    .clear_float:after{
        clear: both;
        display: block;
        content: "";
    }
    .svgContainerTop{
        height: 90px;
        
        top: 88px;
        width: 50%;
        // border: 1px solid #ccc;
        position: absolute;
        left: 25%;
    }
    .svgTrue{
        opacity: 1 !important;
        z-index: 4 !important;
    }
    #mapcontainer{
        width: 50%;
        text-align: center;
        height: 75%;
        position: absolute;
        z-index: 3;
        top: 190px;
        left: 25%;
        margin-top: 10px;
        opacity:0;
        overflow: hidden;
        img{
            width: 81%;
        }
    }
    .svgContainer{
        width: 50%;
        text-align: center;
        height: 75%;
        position: absolute;
        z-index: 3;
        top: 190px;
        opacity:0;
        left: 25%;
        margin-top: 10px;
        &>div.simple-svg-wrapper{
            position: absolute;
            width: 100%;
        }
        &>#YMbox{
            >div{
                position:absolute;
            }
        }
        .svgYan{
            color: #fff;
            font-size: 15px;
            cursor: pointer;
            // font-weight: bolder;
            position: relative;
            .cksss{
                position: absolute;
                top: -25px;
                img{
                    width: 40px;
                    position: relative !important;
                }
            }
            img{
                position: absolute;
                width: 13px;
                background: #fff;
            }
            img:first-child{
                top: -15px;
                left: 2px;
            }
            img:nth-child(2){
                top: -15px;
                left: 15px;
            }
        }
    }
    #app{
        // height: 1000px !important;
    }
    .drag-container{
        width: 100%;
        &>div:not(.ui-sortable-helper){
            position:relative;
            float: left;
            width: 23%;
            // border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 1px;
            background: transparent;
            min-height: 435px;
            margin: 12px 0.5%;
            color: #fff;
            overflow-y: auto;
            // border:1px solid rgba(60,133,200,1);
            border-radius:2px;
            &:nth-child(1){
                // margin-left: 51%;
            }
            &:nth-child(2){
                margin-left: 52.5%;
            }
            &:nth-child(3){
            }
            &:nth-child(4){
                margin-left: 52.5%;
            }
        }
    }
    
    .top_left_bottom{
        position: absolute;
        margin-top:10px;
        left: 24.5%;
        top: 46px;
        height: 30px;
        padding: 5px 10px 5px 15px;
        line-height: 20px;
        z-index: 100;
        margin-left: 0.5%;
        background:linear-gradient(rgba(39, 164, 247, 0.08),rgba(93, 139, 223, 0.03));
        font-weight: bold;
        // position:absolute;
        width: 50%;
        div{
            color: #de0101;
            float: left;
        }
        .fa{
            font-size: 18px;
        }
    }
    .ui-sortable-helper{
        float: left;
        width: 28%;
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 1px;
        background: rgba(255, 255, 255, 0.1);
        height: 46%;
        margin: 1%;
        color: #fff;
    }
    .topL{
        padding: 12px 0 0px 0;
        position: absolute;

        // display: none;
        top: 0;
        left: 0;
        right: 0;
        // bottom:0;
        z-index:4;
        &>.top_left{
            float: right;
            margin: 0 0.5% 0 0.5%;
            margin-left: 41.5%;
            font-size: 12px;
            .top_left_top{
                position: relative;
                background:linear-gradient(rgba(23, 96, 158, 0.73), rgba(177, 207, 224, 0.52));
                padding: 6px 10px 3px;
                width: 128px;
                cursor: pointer;
                span+span{
                    left: 37px;
                }
                .manageMenu{
                    padding: 10px;
                    padding-bottom: 50px;
                    position: absolute;
                    left:15px;
                    background: #3C85C8;
                    width: 200px;
                    border: 1px solid #89dbf5;
                    .manageMenuTitle{
                        width: 100%;
                        float: left;
                        background: rgba(177, 207, 224, 0.09);
                        color: #F4F6A0;
                        font-weight: bold;
                        padding: 5px;
                    }
                    &>div{
                        padding: 8px 6px;
                    }
                    span{
                        margin-left: 0;
                    }
                    .button{
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                        color: #fff;
                        &:hover{
                            color: yellow;
                        }
                    }
                }
                .yaoyao1{
                    float: right;
                }
                .yaoyao{
                    display: inline-block;
                    border-radius: 40%;
                    font-size: 20px;
                    color: #c9d7ff;
                    &+span{
                        font-size: 17px;
                        color: #c9d7ff;
                        position: absolute;
                        top: 6px;
                        display: block;

                    }
                }
            }

        }
        &>.top_right{
            float: left;
            margin-left: 1%;
            .top_right_top{
                text-align: right;

                span{
                    color:#62DBE4;
                }
            }
            .top_right_bottom{
                margin-top:5px;
                color: #89dbf5;
                padding: 8px 5px;;
                background: linear-gradient(rgba(73, 199, 247, 0.38), rgba(249, 249, 249, 0.03));
                .zdLeixin{
                    padding: 6px 6px 4px;
                    cursor: pointer;
                    &>div{
                        font-size: 14px;
                        &:hover span{
                            color: #89dbf5;
                        }
                        float: left;
                        margin-left: 5px;
                        span{
                            color: #fff;
                        }
                        .check_box{
                            display: inline-block;
                            width: 10px;
                            height: 10px;
                            border: 1px solid #89dbf5;
                        }
                    }
                    .active_leixin{
                        .check_box{
                            background: #89dbf5;
                        }
                        span{
                            color: #89dbf5;
                        }
                    }
                }
            }
        }
        .check_box_C{
            cursor: pointer;
            float: left;
            margin-left: 5px;
            span{
                color: #fff;
            }
            .check_box{
                display: inline-block;
                width: 8px;
                height: 8px;
                border: 1px solid #89dbf5;
            }
        }
        .active_leixin{
            .check_box{
                background: #89dbf5;
            }
            span{
                color: #89dbf5;
            }
        }
        span{
            color: #89dbf5;
        }
        
        .font14{
            font-size: 19px;
            line-height: 30px;
            font-weight: bold;
        }
    }
    .svg-info{
        position:absolute;
        // top: 0px;
        // right: 0px;
        right: 50%;
        margin-top: 60px;
        ul{
            li{
                // width:61px;
                height:26px;
                line-height: 26px;
                text-align: center;
                padding:0 10px;
                color: #fff;
                background:linear-gradient(180deg,rgba(60,130,207,1) 0%,rgba(142,187,241,1) 100%);
                .fa{
                    color: #00E5F8
                }
                span{
                    color: #FFFC00;
                    display: inline-block;
                    margin-left: 5px;
                }
            }
        }
    }
    #tipsJ{
        background: rgba(255, 255, 255, 0.3);
        border: 1px solid #fff;
        border-radius: 4px;
        padding: 10px;
        position: fixed;
        z-index: 222;
        width: 200px;
        color: #fff;
        top: 100px;;
        text-indent:2em;
        display: none;
    }
    .svg-level{
          position:absolute;
        // top: 0px;
        // right: 0px;
        left:1.5%;
        margin-top: 60px;
        ul{
            li{
                // width:61px;
                height:26px;
                line-height: 26px;
                text-align: center;
                padding:0 10px;
                color: #fff;
                background:linear-gradient(180deg,rgba(60,130,207,1) 0%,rgba(142,187,241,1) 100%);
                span{
                    color: #FFFC00;
                    display: inline-block;
                    margin: 0 5px;
                }
            }
        }
        
    }

// var obj=[
//                 {name:"近1小时全市面雨量",cons:{
//                         gridinterface:"getGridEleInRectByTimeAndLevelAndValidtime",
//                         gridmethod:"SURF_ZJ_GRID_MUL_HOR",
//                         interface:"getSurfEleByTimeAndRegionCode",
//                         method:"SURF_ZJ_CTR_MUL_HOR",
//                         productcategory:"R1",
//                         validtime:0,
//                     }
//                 },
//                 {name:"近1小时全市极大风",cons:{
//                         gridinterface:"getGridEleInRectByTimeAndLevelAndValidtime",
//                         gridmethod:"SURF_ZJ_GRID_MUL_HOR",
//                         interface:"getSurfEleByTimeAndRegionCode",
//                         method:"SURF_ZJ_CTR_MUL_HOR",
//                         productcategory:"fexmax",
//                         validtime:0,
//                     }
//                 },
//                 {name:"近24小时全市面雨量",cons:{
//                         gridinterface:"getGridEleInRectByTimeAndLevelAndValidtime",
//                         gridmethod:"SURF_ZJ_GRID_MUL_HOR",
//                         interface:"getSurfEleByTimeAndRegionCode",
//                         method:"SURF_ZJ_CTR_MUL_HOR",
//                         productcategory:"R24",
//                         validtime:0,
//                     }
//                 },
//                 {name:"未来1小时全市面雨量",cons:{
//                         gridinterface:"getGridForecastEleGridInRectByTimeAndLevelAndValidtime",
//                         gridmethod:"NAFP_FOR_FTM_ST24H_ZJ",
//                         interface:"getContourEleByTimeAndRegionCode",
//                         method:"NAFP_FOR_FTM_ST24H_ZJ",
//                         productcategory:"apcpsfc",
//                         validtime:0,
//                     }
//                 },
//                 {name:"未来1小时全市极大风",cons:{
//                         gridinterface:"getGridForecastEleGridInRectByTimeAndLevelAndValidtime",
//                         gridmethod:"NAFP_FOR_FTM_ST24H_ZJ",
//                         interface:"getContourEleByTimeAndRegionCode",
//                         method:"NAFP_FOR_FTM_ST24H_ZJ",
//                         productcategory:"apcpsfc",
//                         validtime:0,
//                     }
//                 },
//                 {name:"未来24小时全市面雨量",cons:{
//                         gridinterface:"getGridForecastEleGridInRectByTimeAndLevelAndValidtime",
//                         gridmethod:"NAFP_FOR_FTM_OCF_ZJ",
//                         interface:"getContourEleByTimeAndRegionCode",
//                         method:"NAFP_FOR_FTM_OCF_ZJ",
//                         productcategory:"pr24",
//                         validtime:0,
//                     }
//                 },
//             ]

</style>
